<template>
  <div class="content travelFootprint">
    <THeader :active="this.$route.path"></THeader>

    <el-row>
      <el-col :span="20" :offset="2">
        <h4 :style="{fontSize:'16px',color:'#303133'}">
          <span>旅游足迹</span>
        </h4>
        <Divider></Divider>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" :offset="2">
        <el-card>
          <el-container>
            <el-aside width="200px">
              <h3>足迹目录</h3>
              <el-button type="primary" plain @click="dialogVisible = true">新建足迹目录</el-button>
              <Divider></Divider>
			<el-dialog
              :visible.sync="dialogVisible"
              width="400px"
              :append-to-body="true" >
              <div slot="title" :style="{fontSize:'16px',lineHeight:'24px'}">
                <i class="el-icon-edit-outline"></i>
                <span>新建目录</span>　
                <Divider :distance="10"/>
              </div>
              <el-form :model="footprintSrcForm" :rules="rules" ref="ruleForm">
			       <el-form-item label="目录名：" :label-width="formLabelWidth">
				   <el-input  v-model="footprintSrcForm.srcname"   auto-complete="off" :style="{width:'200px'}"></el-input> 
                </el-form-item> 
                  
              </el-form>
              <span slot="footer" class="dialog-footer">
    <el-button @click= "dialogVisible =false">取 消</el-button>
    <el-button type="primary" @click="addfootprintsrc">确 定</el-button>
  </span>
            </el-dialog>
              <el-input placeholder="输入关键字进行过滤" v-model="filterText">
              </el-input>
              <el-tree node-key="id" @node-click="getFootPrintList" highlight-current style="margin-top:20px" :data="footprintSrc_items" :filter-node-method="filterNode" ref="tree">
              </el-tree>
            </el-aside>
            <el-main style="height:400px">
              <el-row>
                <el-button type="primary" plain @click="routerToRecord">新建旅游足迹</el-button>
                <Divider></Divider>
              </el-row> 
              <el-row>
                <foot-card-item :text="item.brief" :date="item.updateTime" :title="item.title" :showEvent="()=>routerToShow(item.id)" :deleteEvent="()=>handleDelete(item.id)" v-for="(item,index) in footprint_items" :key="index"></foot-card-item>
              </el-row>
            </el-main>
          </el-container>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  footprintSrcListServer,
  footprintListServer,
  footprintSrcServer,
  footprintServer,
  
} from "../../api/footprints"; 

export default {
  name: "travel-footprints",
  data() {
    return {  
     formLabelWidth: '100px',
      dialogVisible: false,
	    footprintSrcForm: {  
        srcname:"", 
		},
      footprint_items: [],
      footprintSrc_items: [],
      filterText: "",
      formData: {},
      srcId: "",
	  rules:{}
    };
  },
  computed: {
    tree() {
      return this.$refs.tree;
    },
    node() {
      return this.tree ? this.tree.getCurrentNode() : undefined;
    }
  },
  mounted() {
    console.log("我应该后");
    this.getFootprintSrcList();
  },
  watch: {
    filterText(val) {
      this.tree.filter(val);
    }
  },
  methods: {
    handleSrcAppend() {},
    handleSrcRemove() {},
    routerToRecord() {
      const { id } = this.node ? this.node : {};
      const params = { path: `/travel-footprints/record` };
      if (!!id) {
        params.query = {};
        params.query.srcId = id;
      }
      this.routerTo(params);
    },
    routerToShow(fid) {
      const { id } = this.node ? this.node : {};
      const params = { path: `/travel-footprints/show/${fid}` };
      if (!!id) {
        params.query = {};
        params.query.srcId = id;
      }
      this.routerTo(params);
    },
    handleDelete(id) {
      if (!!id) {
        this.$confirm("是否删除此足迹?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          footprintServer("delete", {
            params: { id }
          }).then(
            suc => {
              const { code, message } = suc.data;
              if (code) {
                this.$message({
                  type: "success",
                  message
                });
                this.getFootPrintList();
              } else {
                this.$message({
                  type: "error",
                  message
                });
              }
            },
            err => {
              this.$message({
                type: "error",
                message: err.message
              });
            }
          );
        });
      }
    },
    routerTo(param) {
      this.$router.push(param);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getFootprintSrcList() {
      footprintSrcListServer("get").then(
        suc => {
          const { code, data, message } = suc.data;
          if (code) {
            if (Array.isArray(data)) {
              this.footprintSrc_items = data;
              this.$nextTick(() => {
                const { srcId } = this.$route.query;
                if (srcId) {
                  const node = this.footprintSrc_items.find(
                    item => item.id === Number(srcId)
                  );
                  this.tree.setCurrentKey(Number(srcId));
                }
                this.getFootPrintList();
              });
            }
          } else {
            this.$message({
              type: "error",
              message
            });
          }
        },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        }
      );
    },
    getFootPrintList(node, bool) {
      const _node = node ? node : this.node;
      console.log(_node);
      if (_node) {
        footprintListServer("get", { params: { srcId: _node.id } }).then(
          suc => {
            const { code, data, message } = suc.data;
            if (code) {
              if (Array.isArray(data)) {
			  
                this.footprint_items = data;
				console.log(this.footprint_items);
              }
            } else {
              this.$message({
                type: "error",
                message
              });
            }
          },
          err => {
            this.$message({
              type: "error",
              message: err.message
            });
          }
        );
      }
    },

    addfootprintsrc() {
     footprintSrcServer("post", {
	 name:this.footprintSrcForm.srcname,
	 }).then(      
	 suc => {
          const { code, data, message } = suc.data;
          if (code) {
                this.$message({
                  type: "success",
                  message
          }); 
		  this.dialogVisible =false;
    this.getFootprintSrcList();
          } else {
            this.$message({
              type: "error",
              message
            });
          }
        },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        });
    },
    deletefootprintsrc() {
     footprintSrcServer("delete", {}).then(suc => {});
    },
    movefootprintsrc() {
      footprintSrcServer("post", {}).then(suc => {});
    },
    sharefootprint() {
      footprintSrcServer("post", {}).then(suc => {});
    }
  }
};
</script>
<style scoped>

</style>
